<template>
  <div class="placeOrder">
    <div class="placeOrderbg">
      <van-nav-bar
        title="要货下单"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="client-box">
        <div class="client-select">
          <div class="icon-bg">
            <van-icon name="shop-o" size="20" />
          </div>
          <div class="client-info" @click="selectClient">
            <div
              v-if="!isSelect"
              class="info-title"
              style="
                height: 100%;
                text-align: left;
                display: flex;
                align-items: center;
              "
            >
              选择客户
            </div>
            <div class="specific" v-else>
              <div class="info-title">新新产业园</div>
              <div>8577A00010089</div>
              <div
                style="
                  width: 100%;
                  margin-top: 5px;
                  display: flex;
                  justify-content: space-between;
                  flex: 1;
                "
              >
                <span style="margin-left">联系人: 李总</span>
                <span>联系电话: 13800008888</span>
              </div>
            </div>
          </div>
          <van-icon name="arrow" size="19" />
        </div>
      </div>
    </div>
    <van-tabs v-model="activeName">
      <van-tab title="新购" name="new">
        <van-row style="margin-top: 12px">
          <van-col span="6">
            <van-sidebar v-model="productKey">
              <van-sidebar-item
                v-for="item in productList"
                :title="item.title"
                :key="item.id"
                @click="sidebarChange"
              />
            </van-sidebar>
          </van-col>
          <van-col span="18" style="z-index: 20">
            <div class="scrollBar">
              <van-index-bar
                :index-list="indexList"
                @change="handleBarChange"
                :sticky="false"
                ref="indexBar"
              >
                <van-index-anchor
                  v-for="(item, index) in productList"
                  :index="index"
                  :key="item.id"
                >
                  <div class="anchor-title">
                    {{ item.title }}
                  </div>
                  <div
                    v-for="child in item.children"
                    :key="child.id"
                    class="product-box"
                    @click="prodClick(child.id)"
                  >
                    <van-image
                      width="80"
                      height="80"
                      src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <div class="product-name">{{ child.name }}</div>
                    <div class="product-icon">
                      <div class="product-icon-bg">
                        <van-icon name="plus" />
                      </div>
                    </div>
                  </div>
                </van-index-anchor>
              </van-index-bar>
            </div>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="已购" name="old"></van-tab>
    </van-tabs>
    <ProductSku ref="ProductSku" />
  </div>
</template>
<script>
import ProductSku from './component/ProductSku'

export default {
  components: { ProductSku },
  data () {
    return {
      isSelect: false,
      activeName: 'new',
      productKey: 0,
      // indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      productList: [
        {
          id: '1',
          title: 'ERP',
          children: [
            { id: '1-1', imgSrc: '', name: 'Sunlike' },
            { id: '1-2', imgSrc: '', name: 'T6' },
            { id: '1-3', imgSrc: '', name: 'T8' }
          ]
        },
        {
          id: '2',
          title: '研发管理',
          children: [{ id: '2-1', imgSrc: '', name: 'PLM' }]
        },
        {
          id: '3',
          title: '智能仓储物流',
          children: [{ id: '2-1', imgSrc: '', name: 'YUNT' }]
        },
        {
          id: '4',
          title: '条码管理',
          children: [{ id: '2-1', imgSrc: '', name: 'YUNT' }]
        },
        {
          id: '5',
          title: '制造执行系统 ',
          children: [{ id: '2-1', imgSrc: '', name: 'YUNT' }]
        },
        {
          id: '6',
          title: '商业智慧',
          children: [{ id: '2-1', imgSrc: '', name: 'YUNT' }]
        },
        {
          id: '7',
          title: '维护保固',
          children: [{ id: '2-1', imgSrc: '', name: 'YUNT' }]
        }
      ]
    }
  },
  computed: {
    indexList () {
      const arr = []
      this.productList.forEach((item, index) => {
        arr.push(index)
      })
      // console.log('arr', arr)
      return arr
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push({
        path: '/home'
      })
    },
    // 选择客户
    selectClient () {},
    // 产品点击
    prodClick (id) {
      this.$refs.ProductSku.init(id)
    },
    handleBarChange (index) {
      // console.log('handleBarChange index', index, typeof index)
      this.productKey = index
    },
    sidebarChange (index) {
      // console.log('sidebarChange index', index, typeof index)
      this.$refs.indexBar.scrollTo(index.toString())
    }
  }
}
</script>

<style lang="less" scoped>
// /* 引入第三方或自定义的字体图标样式 */
// @font-face {
//   font-family: "my-icon";
//   src: local(vant-icon), url("@/assets/icon/svg/company.svg");
// }

// .my-icon {
//   font-family: "my-icon";
// }

// .my-icon-company::before {
//   content: "\e626";
// }

/deep/ .van-index-bar__sidebar {
  display: none !important;
}

.scrollBar {
  height: calc(100vh - 220px - 44px);
  overflow: scroll;
  z-index: 1;
}
.info-title {
  font-size: 14px;
  color: black;
}
.anchor-title {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
}
.icon-bg {
  width: 35px;
  height: 35px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}
.placeOrderbg {
  width: 100%;
  height: 209px;
  background-image: url("@/assets/background/placeorderBg.png");
  .van-nav-bar {
    background: none;
    /deep/ .van-nav-bar__title {
      color: none;
    }
    .van-hairline--bottom::after {
      border-bottom: none;
    }
  }
  .client-box {
    width: 100%;
    padding: 3px 23px 3px 23px;
    display: flex;
    box-sizing: border-box;
    margin-top: 17px;
    .client-select {
      width: 100%;
      // height: 69px;
      background-color: white;
      border-radius: 12px;
      padding: 18px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .client-info {
        font-size: 12px;
        color: #999999;
        flex: 1;
        padding-left: 13px;
        .specific {
          text-align: left;
        }
      }
    }
  }
}
.product-box {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  .product-name {
    flex: 1;
    text-align: center;
    line-height: 80px;
  }
  .product-icon {
    display: flex;
    align-items: flex-end;
    .product-icon-bg {
      background-color: #ff5e5e;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>